@extends('layouts.header')
@section('content')
    <nav class="breadcrumb">
        <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        <form class="form form-horizontal" id="myform" autocomplete="off">
            <input name="method" type="hidden" value="add">
            <input name="used" type="hidden" value="0">
            <div class="row cl">
                <label class="form-label col-xs-3">名称：</label>
                <div class="formControls col-xs-7">
                    <input name="name" type="text" class="input-text required" value="" maxlength="20">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-3">代号：</label>
                <div class="formControls col-xs-7">
                    <input name="code" type="text" class="input-text required" value="" maxlength="10">
                </div>
            </div>
            @csrf
            <div class="row cl text-c formControls">
                <a class="btn btn-primary radius mr-10" id="submit">添加</a>
            </div>
        </form>

        <table class="mt-10 table table-border table-bordered table-bg table-hover table-condensed table-responsive" id="datatable">
            <thead>
            <tr class="text-c">
                <th>代号</th>
                <th>名称</th>
                <th>使用情况</th>
            </tr>
            </thead>
            <tbody>
            @if($data)
                @foreach($data as $item)
                    <tr class="text-c tbbody">
                        <td class="code" id="code-{{$item->code}}">{{$item->code}}</td>
                        <td class="name">{{$item->name}}</td>
                        <td class="used">
                            <span class="used_value hide">{{$item->used}}</span>
                            {{$item->used == 0 ? '未使用' : '已使用'}}
                        </td>
                    </tr>
                @endforeach
            @else
                暂无数据
            @endif
            </tbody>
        </table>
    </article>
    <script type="text/javascript">
        $(function () {
            $('#submit').on('click', function () {
                if ($('#myform').valid()) {
                    ajax('post', '',$('#myform').serialize(),submitBak,0);
                    function submitBak(res) {
                        if(res == 1){
                            location.reload();
                        }
                    }
                }
            })

            $('.tbbody').on('click', function () {
                let code = $(this).find('td.code').text().trim();
                $(this).addClass('success');
                $(this).siblings().removeClass('success');
                $('input[name=name]').val($(this).find('td.name').text().trim());
                $('input[name=code]').val(code);
                if ($('#del').length === 0) {
                    $('#submit').text('编辑');
                    $('#submit').before('<a class="btn btn-danger radius mr-10 " id="del" onclick="del(\'code-'+code+'\')">删除</a>');
                }
                if ($(this).find('td.used > span.used_value').text().trim() != 0) {
                    $('#del').remove();
                }
            })
        });

        function del(codeId) {
            if ($('#myform').valid()) {
                $('input[name=method]').val('del');
                ajax('post', '',$('#myform').serialize(),delBak,1);
                function delBak(res) {
                    if(res == 1){
                        $('#'+codeId).closest('tr').remove();
                    }
                }
            }
        }
    </script>
    <!--/请在上方写此页面业务相关的脚本-->
@endsection
